import { useEffect, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import CircleLoading from '../../components/Loading/CircleLoading';
import { ThoughtChain } from '@ant-design/x';
import { LoadingOutlined, TagsOutlined } from '@ant-design/icons';
import { Button, Descriptions, Splitter } from 'antd';
import { AgentConsoleProtocol } from '../../types/AgentConsoleProtocol';
import { AgentProtocol } from '../../types/AgentProtocol';


interface AgentConsoleProps {
    connection: signalR.HubConnection;
    connectionStatus: 'success' | 'error' | 'warning' | 'info'
}

export default function AgentConsole({
    connection,
    connectionStatus
}: AgentConsoleProps) {
    const [loading, setLoading] = useState(false);
    const [messages, setMessages] = useState<AgentConsoleProtocol[]>([]);

    useEffect(() => {
        if (connectionStatus === 'success') {
            setLoading(false);

            let agent: AgentConsoleProtocol = {
                id: '',
                type: '',
                message: '',
                error: '',
                code: 0,
            };

            connection.on("AgentConsole", (message: AgentProtocol<AgentConsoleProtocol>) => {
                if (message.type === 'notify') {
                    // 如果id相同，那么更新
                    console.log(message.result.id, agent.id);
                    
                    if (message.result.id === agent.id) {
                        agent.message = agent.message;
                        setMessages([...messages])
                    } else {
                        agent = {
                            id: message.result.id,
                            type: message.result.type,
                            message: message.result.message,
                            error: message.result.error,
                            code: message.result.code,
                        }
                        messages.push(agent);
                        setMessages([...messages])
                    }
                }
            });

        } else {
            setLoading(true);
            connection.off("AgentConsole");
        }

        return () => {
            connection.off("AgentConsole");
        }

    }, [
        connection,
        connectionStatus
    ]);

    const item = messages.map((message) => {
        return (
            {
                title: "Agent",
                status: message.code === 200 ? 'success' : (message.code === 500 ? 'error' : 'pending'),
                icon: status === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
                description: message.message,
                content: (
                    <Descriptions column={1}>
                        <Descriptions.Item >{message.message}</Descriptions.Item>
                    </Descriptions>
                ),
            })
    });

    function renderConsole() {
        return (<Flexbox>
            <ThoughtChain
                style={{ marginLeft: 16 }}
                items={item as any[] || []}
            />
        </Flexbox>)
    }

    return (<Flexbox style={{
        height: 'calc(100vh - 64px)',
        width: '300px',
        overflow: 'auto',
        padding: 16,
        textAlign: loading ? 'center' : 'initial',
    }}>
        {loading ? <CircleLoading /> : renderConsole()}
    </Flexbox>)
}